<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
<div class="shadow">
    <img id="close"  src="photo/close.jpg">
    <img id="photo" src="photo/1.jpg">
    <div id="navigator">
        <span id="prev"><< 上一幅</span>&nbsp&nbsp&nbsp<span id="next">下一幅  >></span>
    </div>
</div>

<style>
    #navigator{
        color: white;
        text-align: center;
    }
    #navigator span{
        margin-left: 25px;
    }
    .shadow{
        position: absolute;
        top: 100px;
        left: 200px;
        width: 500px;
        height: 550px;
        background-color:black;
        background-color: rgba(33,33,33,0.5);
        display:none;




    }
    .pt2{
        padding: 25px  75px ;
    }
    .ls2{
        padding: 72px 25px ;
    }
    .shadow img{
        float: right;
    }
    .box{
        width: 160px;
        height: 160px;

        box-sizing: border-box;
        float: left;
        text-align: center;

    }
    .pt{padding: 12.5px 0 12.5px 0 ;
        background-image: url("framept.jpg");
    }
    .ls{
        padding: 35px 0 35px 0 ;
        background-image: url("framels.jpg");
    }
    .pt:hover{padding: 12.5px 0 12.5px 0 ;
        background-image: url("framept_hover.jpg");
    }
    .ls:hover{
        padding: 35px 0 35px 0 ;
        background-image: url("framels_hover.jpg");
    }
</style>
<script>

    var currentidx;

    function ee(idx,node){
        $("#photo").attr({"src":"photo/"+(idx+1)+".jpg"});


        var h=node.height();
        var w=node.width();
        if(h>w){
            $("#photo").removeClass("ls2");
            $("#photo").addClass("pt2");
        }else{
            $("#photo").removeClass("pt2");
            $("#photo").addClass("ls2");
        }
    }
    $(function(){

        for(var i=1;i<=30;i++){
            $("body").append("<div class='box'><img  src='photo/thumb/"+i +".jpg'/></div>");
        }

        $("img").not(".shadow img").click(function(){

            var idx=$("img").not(".shadow img").index(this);
            ee(idx,$(this));
            $(".shadow").show();
            currentidx=idx;

        })

        $("#close").click(function(){
            $(".shadow").hide();

        })
        $("#next").click(function(){
            currentidx=(currentidx+1)%30;

            ee(currentidx,$("img").not(".shadow img").eq(currentidx));
        })
        $("#prev").click(function(){
            currentidx=(currentidx+29)%30;

            ee(currentidx,$("img").not(".shadow img").eq(currentidx));
        })

    })
    $(window).load(function(){
        var imgs=$("img").not(".shadow img");
        for (var i=0;i<30;i++){
            var h=imgs.eq(i).height();
            var w=imgs.eq(i).width();

            if(h>w){
                $(".box").eq(i).addClass("pt");

            }else{
                $(".box").eq(i).addClass("ls");

            }
        }

    })


</script>


</body>
</html>
